<template>
    <div class="landing-page">
      <transition name="slide">
        <div class="content" v-if="showContent">
          <h1 class="title">心理咨询预约管理系统</h1>
          <van-button class="login-button" @click="goToLogin" type="primary">登录</van-button>
          <van-button class="register-button" @click="goToRegister" type="primary">注册</van-button>
        </div>
      </transition>
    
    </div>
  </template>
  
  <script setup>
  import { useRouter } from 'vue-router';
  import { Button } from 'vant';
 import {ref,onMounted} from 'vue'  
  const router = useRouter();
  const showContent = ref(false);
  
  const goToLogin = () => {
    showContent.value = false;
    setTimeout(() => {
      router.push('/login');
    }, 500);
  };
  
  const goToRegister = () => {
    showContent.value = false;
    setTimeout(() => {
      router.push('/register');
    }, 500);
  };
  
  onMounted(() => {
    showContent.value = true;
  });
  </script>
  
  <style scoped>

.landing-page{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    /* position: relative; */
    /* overflow: hidden; */
    /* 背景图片样式或动画样式 */
    background-attachment: fixed;
    background-image: url("../assets/background/flower_bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.9;
    z-index: -999;
  }
  
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }
  
  .title {
   font-weight: 520;
    font-size: 28px;
    margin-bottom: 25px;
    font-family: '楷体';
  }
  
  .login-button,
  .register-button {
    margin-top: 12px;
    width:120px ;
    border-radius: 30px;
    font-size: 18px;
    font-family: '楷体';
  }
  
  .slide-enter-active,
  .slide-leave-active {
    transition: transform 0.5s;
  }
  
  .slide-enter {
    transform: translateX(100%);
  }
  
  .slide-leave-to {
    transform: translateX(-100%);
  }
  </style>